import { React, useEffect, useRef, useState } from "react";
import "./bottom.scss";
import * as echarts from "echarts";

export default function Index() {
  const echs = useRef(null);
  const settings = JSON.parse(localStorage.getItem("settings")) || {};
  const [menu, setMenu] = useState(settings.zoomMode);
  const [styles, setstyles] = useState(settings.colorData);
  const [colors, setcolors] = useState(settings.colors);

  function getline() {
    let chartInstance = echarts.init(echs.current);
    chartInstance.clear()
    const option = {
      legend: {
        top: "0%",
        textStyle: {
          color: styles[colors][0],
        },
      },
      toolbox: {
        show: true,
      },
      tooltip: {
        trigger: "item",

        backgroundColor: "rgba(0,0,0,0.5)",
        textStyle: {
          color: styles[colors][0],//设置文字颜色
          show: true,
        },
      },
      textStyle: {
        color: styles[colors][0],
      },

      grid: {
        top: "20%", //顶部空闲25% 用于展示标题 和图例，这里就是我们本文要调整的数据。
        containLabel: true,
      },
      color: styles[colors],
      series: [
        {
          // name: "Nightingale Chart",
          type: "pie",
          radius: [30, 100],
          center: ['50%', '55%'],
          roseType: "radius",
          itemStyle: {
            normal: {
              label: {
                //指示到模块的标签文字
                show: true,
                color: styles[colors],
                formatter: "{b} : {c} \n ({d}%)",
              },
              labelLine: {
                //指示到模块的标签线
                show: true,
              },
            },
          },
          data: [{
            value: 72,
            name: '重启'
          },{
          value: 3,
          name: '找人帮忙'
        }, {
          value: 10,
          name: '放弃使用'
        }, {
          value: 15,
          name: '想法修复'
        }],
        },
      ],
    };
    chartInstance.setOption(option);
    option &&
      window.addEventListener("resize", function () {
        chartInstance.resize();
      });
  }

  useEffect(() => {
    getline()
    if (settings.chartRefreshPeriod) {
      const timer = setInterval(() => {
        getline();
      }, settings.chartRefreshPeriod * 1000)
      return () => clearInterval(timer)
    }
  });

  function MenuItem({ menu }) {
    console.log(`MenuItem`, menu, 78987897978789787978978978978978);
    switch (menu) {
      case "stretch":
        return (
          <div
            id="ech"
            ref={echs}
            style={{ width: "25vw", height: "320px", margin: "0 auto" }}
          ></div>
        );
      case "cover":
        return (
          <div
            id="ech"
            ref={echs}
            style={{ width: "100%", height: "380px", margin: "0 auto" }}
          ></div>
        );
      case "contain":
        return (
          <div
            id="ech"
            ref={echs}
            style={{ width: "100%", height: "34vh", margin: "0 auto" }}
          ></div>
        );
      default:
        return (
          <div
            id="ech"
            ref={echs}
            style={{ width: "25vw", height: "320px", margin: "0 auto" }}
          ></div>
        );
    }
  }

  return (
    <>
      <div className="bottom1">
        <h3>当电脑坏了的时候</h3>
        <MenuItem menu={menu}></MenuItem>
      </div>
    </>
  );
}
